<!DOCTYPE html>
<html lang="zh-CN"  xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
<link type="text/css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
<link type="text/css" th:href="@{/css/adminIndex.css}" rel="stylesheet">
<link type="text/css" th:href="@{/font-awesome-4.7.0/css/font-awesome.min.css}" rel="stylesheet">
<script type="text/javascript" th:src="@{/js/bootstrap.min.js}"></script>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>员工订餐后台管理系统</title>
</head>
<body>
<!--模态框-->
<!--修改权限模态框-->
<div class="modal fade" tabindex="-1" role="dialog" id="employeeModifyRoleModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">修改员工权限</h4>
            </div>
            <div class="modal-body">
                <div class="container" id="confirmModalContainer">
                    <!--第一行-->
                    <div class="row">
                        <div class="col-md-3">
                           <p>用户名：<span id="usernameRoleModal"></span></p>
                        </div>
                        <div class="col-md-3">
                            <p>姓名：<span id="realNameRoleModal"></span></p>
                        </div>
                    </div>
                    <br>
                    <!--第二行-->
                    <div class="row" style="margin-left:-150px">
                        <form class="form-horizontal">
                            <div class="form-group">
                                <label class="col-sm-2 control-label" style="font-weight: normal;">权限：</label>
                                <div class="col-sm-2" style="margin-left:-17px">
                                    <select class="form-control" id="roleId">
                                        <option value="0">注销员工</option>
                                        <option value="1">普通员工</option>
                                        <option value="2">送餐员</option>
                                        <option value="3">菜单管理员</option>
                                    </select>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="modifyRoleButton">修改权限</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<!--充值按钮模态框-->
<div class="modal fade" tabindex="-1" role="dialog" id="employeeRechargeModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">员工充值</h4>
            </div>
            <div class="modal-body">
                <div class="container">
                    <!--第一行-->
                    <div class="row">
                        <div class="col-md-3 col-md-offset-1">
                            <p>姓名：<span id="realNameRechargeModal"></span></p>
                        </div>
                    </div>
                    <br>
                    <!--第二行-->
                    <div class="row" style="margin-left:-150px">
                        <form class="form-horizontal">
                            <div class="form-group" style="margin-left:103px">
                                <label class="col-sm-2 control-label" style="font-weight: normal;">充值金额：</label>
                                <div class="col-sm-2" style="margin-left: -30px">
                                    <input type="text" class="form-control" id="employeeRecharge" placeholder="充值金额">
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="rechargeButton">充值</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<!--修改员工信息模态框-->
<div class="modal fade" tabindex="-1" role="dialog" id="employeeModifyInfoModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">修改员工信息</h4>
            </div>
            <div class="modal-body">
                <div class="container">
                    <!--第一行-->
                    <div class="row">
                        <div class="col-md-3">
                            <p>用户名：<span id="usernameInfoModal1"></span></p>
                        </div>
                        <div class="col-md-3">
                            <p>姓名：<span id="realNameInfoModal1"></span></p>
                        </div>
                    </div>
                    <br>
                    <!--第二行-->
                    <div class="row" style="margin-left:-150px">
                        <form class="form-horizontal">
                            <div class="form-group" style="margin-left:19px">
                                <label class="col-sm-2 control-label" style="font-weight: normal;">联系电话：</label>
                                <div class="col-sm-3" style="margin-left: -30px">
                                    <input type="text" class="form-control" id="employeePhone" placeholder="员工电话">
                                    <span style="color:red" id="employeePhoneSpan"></span>
                                </div>
                            </div>
                            <div class="form-group" style="margin-left:19px">
                                <label class="col-sm-2 control-label" style="font-weight: normal;">电子邮箱：</label>
                                <div class="col-sm-3" style="margin-left: -30px">
                                    <input type="text" class="form-control" id="employeeEmail" placeholder="员工电子邮箱">
                                    <span style="color:red" id="employeeEmailSpan"></span>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="modifyInfoButton">修改信息</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<!--订单详情模态框-->
<div class="modal fade" id="orderModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document" style="width: 840px;height: 400px">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">订单详情</h4>
            </div>
            <div class="modal-body">
                <div class="container">
                    <!--菜品信息-->
                    <div class="row">
                        <div class="col-md-7" style="background-color: #f2ffff">订单详细菜品信息</div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <table class="table table-bordered" border="0" style="width: 700px;font-size: 12px;border: 0" id="foodModal">
                                <tbody id="orderModalTbody"></tbody>
                            </table>
                        </div>
                    </div>
                    <!--配送信息-->
                    <br>
                    <div class="row">
                        <div class="col-md-7" style="background-color: #f2ffff;margin-top:9px">配送信息</div>
                    </div>
                    <div class="row" style="margin-top:6px;font-size: 12px">
                        <div class="col-md-5">
                            送餐人：<span id="mealSenderSpan"></span>
                        </div>
                        <div class="col-md-5">
                            配送状态：<span id="mealStatusSpan"></span>
                        </div>
                    </div>
                </div>
            </div>
            <!--按钮-->
            <div class="modal-footer" style="text-align: center">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<!--头部-->
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header" style="margin-left:10px">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">员工订餐后台系统</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse" style="margin-left: 15px">
            <ul class="nav navbar-nav navbar-right" style="margin-right:5px">
                <li style="margin-top:15px"><span style="color: #9d9d9d;">欢迎您，<span sec:authentication="name"></span>！来到员工订单后台系统！</span></li>
                <li><a th:href="@{/admin/logout}">注销</a></li>
            </ul>
        </div>
    </div>
</nav>

<!--内容-->
<div class="container-fluid">
    <!--左边-->
    <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
            <ul class="nav nav-sidebar">
                <li class="clickLi welcome-pageLi"><a href="#">首页</a></li>
                <li role="presentation" class="dropdown">
                    <a class="dropdown-toggle" data-toggle="collapse" href="#userManage" role="button" aria-expanded="false" aria-controls="userManage">
                        用户管理 <span class="caret"></span>
                    </a>
                    <ul class="nav nav-sidebar dropdown collapse" id="userManage" style="margin-left:30px">
                        <li class="clickLi employeeStatus-pageLi"><a href="#">查看员工/权限/注销/恢复管理</a></li>
                        <li class="clickLi employeeRecharge-pageLi"><a href="#">员工余额充值</a></li>
                        <li class="clickLi employeeInfoModify-pageLi"><a href="#">员工信息修改</a></li>
                    </ul>
                </li>
                <li class="clickLi foodCheck-pageLi"><a href="#">菜品查看</a></li>
                <li class="clickLi orderCheck-pageLi"><a href="#">订单查看</a></li>
                <li class="clickLi mealCheck-pageLi"><a href="#">配送查看</a></li>
            </ul>
        </div>
        <!--右边-->
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <!--首页模块-->
            <div id="welcome-page">
                <h2 class="page-header">首页</h2>
                <!--第一行-->
                <div class="row">
                    <div class="col-md-3">
                        <div class="panel panel-success" style="width: 300px">
                            <a href="#" rel="external nofollow" class="list-group-item active" >
                                <h4 class="list-group-item-heading">总交易订单</h4><h1 id="orderCount"></h1>
                            </a>
                        </div>
                    </div>
                    <div class="col-md-3 col-md-offset-1">
                        <div class="panel panel-success" style="width: 300px">
                            <a href="#" rel="external nofollow" class="list-group-item active" >
                                <h4 class="list-group-item-heading">配送成功送达数</h4><h1 id="mealCount"></h1>
                            </a>
                        </div>
                    </div>
                    <div class="col-md-3 col-md-offset-1">
                        <div class="panel panel-success" style="width: 300px">
                            <a href="#" rel="external nofollow" class="list-group-item active" >
                                <h4 class="list-group-item-heading">菜品出售总份数</h4><h1 id="foodSaleCount"></h1>
                            </a>
                        </div>
                    </div>
                </div>
                <br>
                <!--第二行-->
                <div class="row">
                    <div class="col-md-3 col-md-offset-2">
                        <div class="panel panel-success" style="width: 300px">
                            <a href="#" rel="external nofollow" class="list-group-item active" >
                                <h4 class="list-group-item-heading">菜品上架数</h4><h1 id="foodUpCount"></h1>
                            </a>
                        </div>
                    </div>
                    <div class="col-md-3 col-md-offset-1">
                        <div class="panel panel-success" style="width: 300px">
                            <a href="#" rel="external nofollow" class="list-group-item active" >
                                <h4 class="list-group-item-heading">菜品下架数</h4><h1 id="foodDownCount"></h1>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <!--查看员工/权限/注销/恢复管理模块-->
            <div id="employeeStatus-page">
                <div class="row">
                    <div class="col-md-8">
                <h2 class="page-header">查看员工/权限/注销/恢复管理</h2>
                    </div>
                    <div class="col-md-4 text-right" style="margin-top: 30px">
                        <form class="form-inline">
                            <div class="form-group">
                                <label>按姓名搜索：</label>
                                <input type="text" class="form-control" id="searchEmployeeNameInput1" placeholder="请输入员工姓名">
                            </div>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button type="button" class="btn btn-primary" id="searchEmployeeNameButton1">搜索</button>
                        </form>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12 text-center">
                        <table class="table table-hover">
                            <thead>
                            <tr>
                                <td>用户id</td>
                                <td>用户名</td>
                                <td>联系电话</td>
                                <td>性别</td>
                                <td>电子邮箱</td>
                                <td>真实姓名</td>
                                <td>头像</td>
                                <td>最近登录时间</td>
                                <td>余额</td>
                                <td>角色</td>
                                <td>修改权限</td>
                            </tr>
                            </thead>
                            <tbody id="employeeList1Tbody">
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12 text-center" id="employeeList1Tbody_setPage"></div>
                </div>
            </div>
            <!--员工余额充值模块-->
            <div id="employeeRecharge-page">
                <div class="row">
                    <div class="col-md-8">
                        <h2 class="page-header">员工余额充值</h2>
                    </div>
                    <div class="col-md-4 text-right" style="margin-top: 30px">
                        <form class="form-inline">
                            <div class="form-group">
                                <label>按姓名搜索：</label>
                                <input type="text" class="form-control" id="searchEmployeeNameInput2" placeholder="请输入员工姓名">
                            </div>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button type="button" class="btn btn-primary" id="searchEmployeeNameButton2">搜索</button>
                        </form>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12 text-center">
                        <table class="table table-hover">
                            <thead>
                            <tr>
                                <td>用户id</td>
                                <td>用户名</td>
                                <td>真实姓名</td>
                                <td>余额</td>
                                <td>充值</td>
                            </tr>
                            </thead>
                            <tbody id="employeeList2Tbody">
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12 text-center" id="employeeList2Tbody_setPage"></div>
                </div>
            </div>
            <!--菜品查看模块-->
            <div id="foodCheck-page">
                <div class="row">
                    <div class="col-md-8">
                        <h2 class="page-header">菜品查看</h2>
                    </div>
                    <div class="col-md-4 text-right" style="margin-top: 30px">
                        <form class="form-inline">
                            <div class="form-group">
                                <label>按菜名搜索：</label>
                                <input type="text" class="form-control" id="searchFoodNameInput" placeholder="请输入菜品名">
                            </div>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button type="button" class="btn btn-primary" id="searchFoodNameButton">搜索</button>
                        </form>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12 text-center">
                        <table class="table table-hover">
                            <thead>
                            <tr>
                                <td>菜品id</td>
                                <td>菜品名</td>
                                <td>单价</td>
                                <td>总份数</td>
                                <td>剩余份数</td>
                                <td>菜品类型</td>
                                <td>菜品描述</td>
                                <td>菜品图片</td>
                                <td>上架状态</td>
                                <td>最近修改时间</td>
                            </tr>
                            </thead>
                            <tbody id="foodListTbody">
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12 text-center" id="foodTbody_setPage"></div>
                </div>
            </div>
            <!--订单查看模块-->
            <div id="orderCheck-page">
                <div class="row">
                    <div class="col-md-8">
                        <h2 class="page-header">订单查看</h2>
                    </div>
                    <div class="col-md-4 text-right" style="margin-top: 30px">
                        <form class="form-inline">
                            <div class="form-group">
                                <label>订单人搜索：</label>
                                <input type="text" class="form-control" id="searchOrderNameInput" placeholder="请输入订单人">
                            </div>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button type="button" class="btn btn-primary" id="searchOrderNameButton">搜索</button>
                        </form>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12 text-center">
                        <table class="table table-hover">
                            <thead>
                            <tr>
                                <td>订单id</td>
                                <td>订单人</td>
                                <td>订单金额</td>
                                <td>订单地址</td>
                                <td>支付方式</td>
                                <td>订单状态</td>
                                <td>下单时间</td>
                                <td>预计配送时间</td>
                                <td>查看订单详情</td>
                            </tr>
                            </thead>
                            <tbody id="orderListTbody">
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12 text-center" id="orderTbody_setPage"></div>
                </div>
            </div>
            <!--配送查看模块-->
            <div id="mealCheck-page">
                <div class="row">
                    <div class="col-md-8">
                        <h2 class="page-header">配送查看</h2>
                    </div>
                    <div class="col-md-4 text-right" style="margin-top: 30px">
                        <form class="form-inline">
                            <div class="form-group">
                                <label>送餐人搜索：</label>
                                <input type="text" class="form-control" id="searchMealNameInput" placeholder="请输入送餐人">
                            </div>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button type="button" class="btn btn-primary" id="searchMealNameButton">搜索</button>
                        </form>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12 text-center">
                        <table class="table table-hover">
                            <thead>
                            <tr>
                                <td>配送id</td>
                                <td>配送人</td>
                                <td>配送订单id</td>
                                <td>配送状态</td>
                                <td>接单时间</td>
                                <td>预计送达时间</td>
                                <td>送达时间</td>
                            </tr>
                            </thead>
                            <tbody id="mealListTbody">
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12 text-center" id="mealTbody_setPage"></div>
                </div>
            </div>
            <!--员工信息修改模块-->
            <div id="employeeInfoModify-page">
                <div class="row">
                    <div class="col-md-8">
                        <h2 class="page-header">员工信息修改</h2>
                    </div>
                    <div class="col-md-4 text-right" style="margin-top: 30px">
                        <form class="form-inline">
                            <div class="form-group">
                                <label>按姓名搜索：</label>
                                <input type="text" class="form-control" id="searchEmployeeNameInput3" placeholder="请输入员工姓名">
                            </div>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button type="button" class="btn btn-primary" id="searchEmployeeNameButton3">搜索</button>
                        </form>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12 text-center">
                        <table class="table table-hover">
                            <thead>
                            <tr>
                                <td>员工id</td>
                                <td>用户名</td>
                                <td>姓名</td>
                                <td>联系电话</td>
                                <td>电子邮箱</td>
                                <td>修改</td>
                            </tr>
                            </thead>
                            <tbody id="employeeList3Tbody">
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12 text-center" id="employeeTbody3_setPage"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" th:src="@{/js/adminIndex.js}"></script>
<script type="text/javascript" th:src="@{/layer/layer.js}"></script>
</body>
</html>